import { Component, Prop, Vue, Emit } from 'vue-property-decorator'

@Component({})
export default class ImagePreview extends Vue {
  @Prop({ default: '' }) private visible!: boolean
  @Prop({ default: '' }) private url!: string
  @Prop({ default: '' }) private title!: string

  protected render(h: any) {
    return (
      <div>
        <el-dialog
          title={this.title}
          custom-class="custom-dialog"
          width={'700px'}
          visible={this.visible}
          modal-append-to-body={false}
          append-to-body
          {...{
            on: {
              'update:visible': this.visibleChange,
            },
          }}
        >
          <img width="100%" src={this.url} alt="" />
        </el-dialog>
      </div>
    )
  }
  @Emit('visibleChange')
  private visibleChange(val: boolean) {
    return val
  }
}
